@charset "utf-8";
@import "reset";
@function r($px){
    @return $px/100*1rem;
}
body{
    font-size: 16px;
    header{
        width: 100%;
        height: r(89);
        display: flex;
        background-color: #b20000;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(16);
        position: fixed;
        top: 0;
        left: 0;
        .logo-box{
            width: r(265);
            max-width: 265px;
            img{
                width: 100%;
            }
        }
        i{
            color: white;
        }
    }
}
section{
    margin-top: r(89);
    .banner{
        position: relative;
        .imgWrap{
            width: r(640);
            height: r(357);
        }
        .info{
            box-sizing: border-box;
            width: 100%;
            font-weight: normal;
            padding: r(20) r(22) r(14) r(31);
            position: absolute;
            bottom: 0;
            left: 0;
            color: white;
            background-color:rgba(0,0,0,.4);
            p{
              
                font-size: r(26);
            }
            .bt{
                padding-top: r(12);
                font-size: r(15);
                .icon{
                display: inline-block;
                    i{
                        font-size: r(10);
                        margin-right: r(5);
                         &:hover{
                            color: #b60005;
                    }  
                    }
                    span{
                        margin-right: r(47); 
                    }       
                    
                }
                span{
                    font-size: r(17);
                }
        }
        }
        .pointer{
            position: absolute;
            left: 50%;
            top: r(333);
            transform: translate(-50%,-50%);
            a{
                float: left;
                height: r(10);
                width: r(10);
                background-color:#cdbeb2;
                border-radius: 50%;
                margin-right: r(11);
                z-index: 999;
               
                &:hover{
                    background-color: #b60005;
                }
            }
            .active{
                    background-color: #b60005;
                }
        }
    } 
    .hot-new{
            margin-top: r(13);
            li{
                display: flex;
                justify-content: space-between;
                padding: r(17) r(30);
                .hot-new-l{
                    width: r(324);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p{
                        font-size: r(24.89);
                    }
                    div{
                        font-size: r(21);
                        padding-top: r(30);
                        color: #c5c5c5;
                        display: flex;
                        line-height: r(21);
                        justify-content: space-between;
                        span{
                            i{
                                font-size: r(17);
                                &:hover{
                                    color: #b20000;
                                }
                            }
                        }
                    }
                }
                .hot-new-r{
                    width: r(208);
                }
                &:hover{
                    cursor: pointer;
                    background-color: rgb(218, 218, 218);
            }
            }
            
            .line{
                height: 1px;
                margin-left: r(30);
                margin-right: r(30);
                background-color: #e2e2e2;
            }
            .line-1{
                height: 1px;
                background-color: #e2e2e2;
                margin: r(33) r(30) r(20) r(30);
            }
            .more{
                text-align: center;
                font-size: r(22);
                a{
                    color: #bbbbbb;
                }
            }
   
        }
    .divi{
        background-color: #f5f5f5;
        height: r(25);
        margin-top: r(5);
    }
    .new{
        ul{
            padding-top: r(35);
            li{
                margin-bottom: r(33);
                padding: 0 r(30);
                p{
                    font-size: r(24);
                }
                .pic{
                    display: flex;
                    justify-content: space-between;
                    margin-top: r(20);
                    margin-bottom: r(11);
                    .ad{
                        width: r(188);
                    }
                }
                .comment{
                    display: flex;
                    justify-content: space-between;
                    color: #c5c5c5;
                    font-size: r(19);
                    .comment-l{
                        vertical-align: middle;
                        .tx{
                            width: 20px;
                            height: 20px;
                            border: 1px solid transparent;
                            border-radius: 50%;
                            overflow: hidden;
                            vertical-align: middle;
                            display: inline-block;
                        }
                        p{
                            display: inline-block;
                            margin-left: r(10);
                            margin-right: r(18);
                        }
                        span{
                            margin-right: r(22);
                            i{
                                font-size: r(16);
                                margin-right: r(6);
                            }
                            
                        }
                    }
                }
            }
            &:hover{
                cursor: pointer;
                background-color: rgb(218, 218, 218);
            }
        }
    }
    .more{
            font-size: r(22);
            color: #bbbbbb;
            text-align: center;
    }  
}
footer{
    width: 100%;
    background-color: #f5f5f5;
    border-top: 1px solid #bbb9ba;
    margin-top: r(17);
    padding-left: r(30);
    padding-right: r(30);
    position: fixed;
    bottom: 0;
    left: 0;
    ul{
        padding-top: r(14);
        padding-bottom: r(11);
        padding-left: r(14);
        display: flex;
        justify-content: space-between;
        li{
            display: flex;
            align-items: center;
            flex-direction:column;
            a{
                .nav{
                width: r(48);
                height: r(46);
                position: relative;
                    .nav-1{
                        width: r(48);
                        height: r(46);
                        position: absolute;
                        top:-2px;
                        left: 0;
                    }
                    .nav-2{
                        width: r(48);
                        height: r(46);
                        position: absolute;
                        top:-2px;
                        left: 0; 
                        opacity: 0;  
                    }
                }
                &:hover .nav-1{
                    opacity: 0;
                }
                &:hover .nav-2{
                    opacity: 1;
                }
            div{
                margin-top: r(7);
                text-align: center;
                font-size: r(17);
            }
            .active{
                color: #b60106;
            }  
            &:hover div{
                color: #b60106;
            }
            }  
            &:last-child a{
                display: inline-block;
                width: r(70);
                .nav{
                    .nav-1{
                    width: r(70);
                    }
                    .nav-2{
                        width: r(70);
                    }
                }
            }   
        }
        // 
        .ver{
            width: 1px;
            height: r(80);
            
            // background-color: #e9e9e9e9;
             border-left: 1px solid #e9e9e9;
        }
    }
}